<template>
  <el-row class="mb-4">
    <el-button type="success" @click="handleAdd">添加</el-button>
  </el-row>
  <el-table :data="moduleList" style="width: 100%">
    <el-table-column prop="name" label="名称" />
    <el-table-column prop="url" label="路径" />
    <el-table-column prop="role" label="角色" />
    <el-table-column fixed="right" label="操作" >
      <template #default="scope">
        <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination background layout="prev, pager, next" :total="totle" @change="handleChanged" />

  <el-dialog
    v-model="dialogVisible"
    :title="title"
    width="60%"
  >
    <el-form :model="form" label-width="120px">
        <el-form-item label="模块名称">
            <el-input v-model="form.name" placeholder="请输入模块名称" />
        </el-form-item>
        <el-form-item label="入口地址">
            <el-input v-model="form.url" placeholder="请输入模块入口地址" />
        </el-form-item>
        <el-form-item label="进入权限">
            <el-select v-model="form.role" class="m-2" placeholder="请选择角色">
                <el-option
                v-for="item in options"
                :key="item"
                :label="item"
                :value="item"
                />
            </el-select>
        </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref, reactive, onMounted  } from 'vue'
import {addOrEditModule,deleteModule,getModuleList} from '@/api/moduel'
import { ElMessage,ElMessageBox } from 'element-plus'


//所有角色、
const options = ref(['超级管理员','学生','信息员','授课教师','系主任','教务员','教务处'])
//数据
const moduleList = ref([])
//分页信息
const totle = ref(0)
const page  = ref(1)
const limit = ref(10)

//对话框显示或者隐藏
const dialogVisible = ref(false)
const title = ref('添加模块')
//需要提价的数据
const form = reactive({
    'id':0,
    'name':'',
    'url':'',
    'role':''
})


const getList = ()=>{
    //这里面加载page页的数据
    getModuleList(page.value, limit.value).then(res=>{
      moduleList.value = res.data.rows;
      total.value = res.data.total;
    })
}

const handleChanged = (p)=>{
  page.value = p;
  getList();
}

const handleAdd = ()=>{
    //弹出添加页面
    dialogVisible.value = true
    //初始化对话框
    form.id = 0
    form.name = ''
    form.role = ''
    form.url = ''

}

const handleEdit = (row)=>{
    //弹出修改页面
    form.id = row.id;
    form.name = row.name;
    form.role = row.role;
    form.url  = row.url;
    dialogVisible.value = true
}

const handleDelete = (id)=>{
    //弹出确认框
    ElMessageBox.confirm(
    '您是否确定删除选择的记录?',
    'Warning',
    {
      confirmButtonText: '是',
      cancelButtonText: '否',
      type: 'warning',
    }
  )
    .then(() => {
      deleteModule(id).then(res=>{
        if(res.code==0){
            ElMessage({
              message: '删除成功',
              type: 'success',
            })
            dialogVisible.value = false
            getList();
        }else{
            ElMessage.error("操作失败")
        }
      })
    })
    .catch(() => {})
}

const handleSubmit = ()=>{
    if(form.id==0){
        //添加
        addOrEditModule(0, form).then(res=>{
            //添加返回内容，成功或者失败
            if(res.code==0){
                ElMessage({
                  message: '添加成功',
                  type: 'success',
                })
                dialogVisible.value = false
                getList();
            }else{
                ElMessage.error("操作失败")
            }
        }).catch(err=>{
            ElMessage.error(err.message)
        })
    }else{
        //修改
        addOrEditModule(form.id, form).then(res=>{
            //修改返回内容，成功或者失败
            if(res.code==0){
                ElMessage({
                  message: '保存成功',
                  type: 'success',
                })
                dialogVisible.value = false
                getList();//刷新列表
            }else{
                ElMessage.error("操作失败")
            }
        }).catch(err=>{
            ElMessage.error(err.message)
        })
    }

}

onMounted(()=>{
    getList()
})

</script>

